<template>
    <header>
        <div class="logo">后台管理系统</div>
        <div style="margin-left: auto">管理员</div>
        <div class="logout" @click="logout">退出</div>
    </header>
    <main>
        <div class="menu" >
            <el-menu
        active-text-color="#ffd04b"
        background-color="#545c64"
        router="true"
        class="el-menu-vertical-demo"
        :default-active="$route.path"
        text-color="#fff"
      >
        <el-menu-item index="/admin"  >
          <span>广告设置</span>
        </el-menu-item>
        <el-menu-item index="/admin/verify">
          <span>企业入驻审核</span>
        </el-menu-item>
        <el-menu-item index="/admin/type">
          <span>帖子分类设置</span>
        </el-menu-item>
        <el-menu-item index="/admin/user">
          <span>用户管理</span>
        </el-menu-item>

      </el-menu>
        </div>
       <div class="content"> <router-view></router-view></div>
    </main>
</template>
<script setup lang="ts">
import { useRouter } from 'vue-router';

const router = useRouter()
const logout = ()=>{
    window.localStorage.removeItem('adminToken');
    router.push('/adminLogin');
}
</script>
<style scoped lang="less">
header {
    height: 60px;
    padding: 0 50px;
    background-color: #383d42;
    display: flex;
    color: aliceblue;
    align-items: center;
    .logo {
        margin-right: 100px;
    }
    .tab {
        margin-left: 30px;
        cursor: pointer;
        user-select: none;
    }
    .logout {
        color: red;
        margin-left: 20px;
        cursor: pointer;
        user-select: none;
    }
}
main {
    height: calc(100% - 60px);
    display: flex;
    .menu{
        width: 200px;
        height: calc(100%);
        background-color: #545c64;
    }
    .content{
        box-sizing: border-box;
        flex: 1;
        height: calc(100% - 60px);
        padding: 30px;
    }
}
</style>
